<template>
  <el-container class="login">
    <el-main>
      <el-row type="flex" justify="center" style="margin-top: 13%">
        <el-col :span="8">
          <div class="login-div-img">
            <el-image
                class="login-div-img_el_img"
                :src="require('../assets/app/20210419170528.gif')"
                fit="contain"></el-image>
          </div>
        </el-col>
        <el-col :span="6">
          <el-container style="background: white">
            <el-header style="margin-top: 10%">
              <h2 style="margin: 0 auto;">Think-Tank-Serve</h2>
              <p style="font-size: .4rem;">后台信息服务平台</p>
            </el-header>
            <el-main>
              <div v-show="showDiv === 0">
                <el-form status-icon ref="form" :model="form" label-width="auto" size="small" label-position="right" :rules="rules">
                  <el-form-item prop="userName" class="form-item">
                    <el-input v-model="form.userName" placeholder="请输入用户名" clearable></el-input>
                  </el-form-item>
                  <el-form-item prop="password" class="form-item">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" clearable @keyup.enter.native="login('form')"></el-input>
                  </el-form-item>
                  <el-form-item class="form-item">
                    <el-button type="primary" @click="login('form')" style="width: 100%" :loading="buttonLoading">登陆</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div v-show="showDiv === 2">
                <WxLogin appid="wxab7ebd7266a0b3fa" scope="snsapi_login" theme="black" redirect_uri="http://jxtz.net/local_wechat_login" href="data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDgwJTsgbWFyZ2luOiAwIGF1dG87IHBhZGRpbmc6IDAgMDt9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQouaW1wb3dlckJveCAuc3RhdHVzIHtkaXNwbGF5OiBub25lO30="></WxLogin>
              </div>
              <div v-show="showDiv === 1">
                <el-form status-icon ref="registerForm" :model="registerForm" label-width="auto" size="small" label-position="right" :rules="registerRules">
                  <el-form-item prop="userName" class="form-item">
                    <el-input v-model="registerForm.userName" placeholder="请输入用户名" clearable></el-input>
                  </el-form-item>
                  <el-form-item prop="password" class="form-item">
                    <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" clearable autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item prop="checkPass" class="form-item">
                    <el-input type="password" v-model="registerForm.checkPass" placeholder="再次请输入密码" clearable autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item class="form-item">
                    <el-button type="primary" @click="register('registerForm')" style="width: 100%" :loading="buttonLoading">账号注册</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-main>
            <el-footer>
              <el-button v-if="showDiv !== 2" size="small" type="text" @click="showDiv = 2;">微信扫码</el-button>
              <el-button v-else size="small" type="text" style="" @click="showDiv = 0;">账号登陆</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button v-if="showDiv !== 3" size="small" type="text" style="" @click="showDiv = 3">QQ登陆</el-button>
              <el-button v-else size="small" type="text" style="" @click="showDiv = 0;">账号登陆</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button v-if="showDiv !== 1" size="small" type="text" style="" @click="showDiv = 1;">账号注册</el-button>
              <el-button v-else size="small" type="text" style="" @click="showDiv = 0;">账号登陆</el-button>
            </el-footer>
          </el-container>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

</template>
<script>
import WxLogin from 'vue-wxlogin'
import {checkUsername} from "@/api/User";


export default {
  name: "Login",
  components: {
    WxLogin
  },
  data(){

    var validateUserName = (rule, value, callback) => {
      if (value === ''){
        callback(new Error('请输入用户名'));
      }else {
        checkUsername(value).then(res => {
          if (res.data.code === 51002){
            callback(res.data.message)
          }else {
            callback()
          }
        })
      }
    }

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.registerForm.validateField('checkPass');
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return{
      form: {},
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { required: true, pattern: /^[a-zA-Z][a-zA-Z0-9]{1,15}$/, message: '请输入正确的用户名', trigger: 'blur' }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },

      registerRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { required: true, pattern: /^[a-zA-Z][a-zA-Z0-9]{1,15}$/, message: '用户名需要以字母开头，且大于1位小于15位', trigger: 'blur' },
          { required: true, validator: validateUserName, trigger: 'blur' }
        ],
        password: [
          { require: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { require: true, validator: validatePass2, trigger: 'blur' }
        ]
      },

      registerForm: {},
      againPassword: '',
      showDiv: 0, // 0 是账号登陆界面， 1 是注册界面， 2 是微信登陆界面， 3 是qq登陆界面
      wechatAppId: 'wx2b1bb65a607a085f',
      wechatRedirectUrl: 'http%3A%2F%2Flocalhost%3A8080/wechat/login_wechat',
      wechatScope: 'snsapi_login',
      wechatTheme: 'white',
      buttonLoading: false,
      wechatClass: 'login-div-wechat',
      wechatClassButton: 'login-div-wechat-button'
    }
  },

  watch: {
    $route() {
      var token = this.$route.query.token;
      if (token){
        sessionStorage.setItem('jwt', token)
      }
    }
  },

  created() {
  },

  methods: {
    login(name){
      this.buttonLoading = true
      var form = this.form;
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$store.dispatch('login', form).then(res => {
            this.$notify.success(res.data.message)
            this.$router.push({path: '/'})
          }).catch(error => {
            this.$notify.error('登陆异常，请检查账号信息或联系开发人员')
          }).finally(() => {
            this.buttonLoading = false
          })
        } else {
          this.buttonLoading = false
          this.$notify.warning('请仔细检查表单')
          return false;
        }
      });
    },

    qqLogin(){
      this.showDiv = 3;
      this.$notify.info('敬请期待')
    },

    register(name){
      this.buttonLoading = true
      var form = this.registerForm;
      this.$refs[name].validate((valid) => {
        if (valid) {
          const { userName , password } = this.registerForm
          this.$store.dispatch('register', { userName, password }).then(res => {
            this.registerForm = {}
            this.$notify.success(res.data.message)
          }).catch(error => {
            this.$notify.error('注册异常，请检查账号信息或联系开发人员')
          }).finally(() => {
            this.buttonLoading = false
          })
        } else {
          this.buttonLoading = false
          this.$notify.warning('请仔细检查表单')
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.login{
  width: 100%;
  /*border: 1px solid black;*/
  height: 100%;
  /*height: 54rem;*/
  background: url('../assets/background/bg.jpg') center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  /*float: left;*/
}

.login-div-img{
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
  background: rgb(249,229,238);
  /*float: left;*/
}

.login-div-img_el_img{
  width: 66%;
  height: 66%;
  margin: 0 auto;
  /*border: 1px solid black;*/
  position: relative;
  top: 17%;
  /*margin-top: 13%;*/
}

.login-div-form{
  width: 100%;
  height: 100%;
  /*border: 1px solid black;*/
  float: left;
  background: white;
}

.form-item{
  width: 60%;
  /*float: left;*/
  margin-left: 20%;
  margin-top: 5%;
}


</style>
